<!--
 * @Author: 王灿
 * @Date: 2019-12-22 14:17:04
 * @LastEditTime : 2019-12-22 15:39:20
 * @LastEditors  : Please set LastEditors
 * @Description: 商品收藏
 * @FilePath: \scarlet-sparrow-admin\src\views\commodity\commodity-collection\index.vue
 -->
 <template>
  <div class="public">
    <!-- header -->
    <jq-title :title="title" @addTableRow="onTableRow" />
    <!-- fun btn -->
    <!-- <el-form class="jq-btns">
      <el-button
        type="danger"
        size="mini"
        @click="onCollectionDelete"
      >移除收藏</el-button>
    </el-form> -->
    <!-- 商品列表 -->
    <happy-scroll color="rgba(0,0,0,0.5)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="public-table" @selection-change="onHandleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <!-- 商品名称 -->
        <el-table-column prop="tails.name" label="商品名称"></el-table-column>
        <el-table-column prop="tails.mainPic" label="商品主图">
          <template slot-scope="scope">
            <el-image 
              style="width: 100px; height: 100px"
              :src="srcList[scope.$index]" 
              :preview-src-list="srcList">
            </el-image>
          </template>
        </el-table-column>
        <!-- 实际价格 -->
        <el-table-column prop="tails.actualPrice" label="实际价格"></el-table-column>
        <!-- 收藏人数 -->
        <el-table-column prop="tails.collectionBase" label="收藏人数"></el-table-column>
        <!-- 创建时间 -->
        <el-table-column prop="createAt" label="收藏时间" />
        <!-- 状态 -->
        <el-table-column prop="stateflag" label="状态">
          <template slot-scope="scope">
            <span
              class="public-table__status"
              :class="[scope.row.stateflag === 0 ? '' : 'active']"
            ></span>
            <span>{{ scope.row.stateflag === 0 ? '已收藏' : '取消收藏'}}</span>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
    <!-- 分页 -->
    <jq-page :total="total" :pageNum="pageNum" @changePageNum="changePageNum" />
  </div>
</template>

<script>
import JqTitle from '@/components/jq-title/index.vue'
import JqTooltip from '@/components/jq-tooltip/index.vue'
import JqPage from '@/components/jq-page/index.vue'
import { getCollectionList, getCollectionDelete, getDownUrl } from '@/api/commodity.js'
export default {
  name: 'CommodityCollection',
  components: {
    JqTitle,
    JqTooltip,
    JqPage
  },
  data() {
    return {
      title: { label: '商品收藏', flag: true, searchFlag: false },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [],
      // 抽屉开关
      isShow: false,
      // 标题
      tabTitle: '新增',
      // row数据
      tabRow: {}
    }
  },
  watch: {
    // 监听页码变化
    pageNum() {
      this.onGetCollectionList()
    },
    // 监听条数变化
    pageSize() {
      this.onGetCollectionList()
    },
    // 监听刷新父组件页面标记
    isRefresh() {
      if (this.isRefresh) {
        this.onGetCollectionList()
      }
    },
    // 子组件关闭是情况row
    isShow() {
      if (!this.isShow) {
        this.tabRow = {}
      }
    },
    // 商品主图
    tableData() {
      this.onGetSrcList()
    }
  },
  created() {
    this.onGetCollectionList()
  },
  methods: {
    // 父子组件通讯 -- 新增商品
    onTableRow(data) {
      this.isShow = data.isShow
      this.tabTitle = '新增'
      this.isRefresh = false
    },
    // 页码变化
    changePageNum(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
    },
    // 商品收藏列表
    onGetCollectionList() {
      getCollectionList({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.total = res.data.totalRow
      })
    },
    // 获取商品主图
    onGetSrcList() {
      let i = 0
      let len = this.tableData.length
      this.srcList = []
      this.onGetDownUrl(i, len)
    },
    onGetDownUrl(i, len) {
      // 下载图片并显示
      getDownUrl({
        fileName: this.tableData[i].tails.mainPic
      }).then(response => {
        this.srcList.push(response.data.url.split("?")[0])
        if (i < len - 1) {
          i++
          this.onGetDownUrl(i, len)
        }
      })
    },
    // 选择
    onHandleSelectionChange(val) {
      // console.log(val)
    },
    // 移除收藏
    onCollectionDelete() {}
  }
}
</script>

<style lang="scss">
.public {
  .public-table__status {
    &.active {
      background: #96b327;
    }
  }
}
</style>